<style lang="less">
@import './login.less';
</style>

<template>
<div class="login">
	<div style="width: 330px; position: absolute; right: 550px; top: 20%; color: white;">
		<div style="font-size: 30px;">AGILE-BPM</div>
		<div style="margin-top: 10px; margin-bottom: 10px;">
			欢迎使用
			<span style="font-size: 15px;"> AGILE-BPM 流程管理平台</span>
		</div>
		<div>
			<Icon type="ios-checkmark" size="30" />
			可以跨库构建任意数据结构的数据模型
		</div>
		<div>
			<Icon type="ios-checkmark" size="30" />
			轻松的生成数据模型的容器-表单，并进行一个业务流转
		</div>
		<div>
			<Icon type="ios-checkmark" size="30" />
			高效的流程任务处理能力
		</div>
		<div>
			<Icon type="ios-checkmark" size="30" />
			稳健低耦合的流程引擎核心
		</div>
		<div>
			<Icon type="ios-checkmark" size="30" />
			强大丰富的表单组件支持，快速构建所需的业务应用
		</div>
		<div>
			<Icon type="ios-checkmark" size="30" />
			多环境、多数据源真实复杂场景的支持
		</div>
		<div>
			<Icon type="ios-checkmark" size="30" />
			基于基础组件,未来更多应用的可贡献性、可共享性
		</div>
		<div style="margin-top: 10px;">
			了解更多详情
			<a href="http://doc.agilebpm.cn" target="blank">官方文档 &raquo;</a>
		</div>
		<Divider />
		<div>© 2018 All Rights Reserved. AGILE-BP</div>
	</div>
  <div class="login-con">
		<Card icon="log-in" title="欢迎登录" :bordered="false">
		<div class="form-con">
			<login-form @on-success-valid="handleSubmit"></login-form>
		</div>
		</Card>
	</div>
</div>
</template>

<script>
import Vue from 'vue'
import LoginForm from '_c/login-form'
import { mapActions } from 'vuex'
export default {
  components: {
    LoginForm
  },
  mounted: function () {

  },
  methods: {
    ...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),
    handleSubmit ({ userName, password }) {
      var post = Vue.abHttpUtil.postForm('/login/valid', { account: userName, password: password })
      var component = this
      Vue.abTools.getResultData(post, function () {
        component.$router.push({
          name: component.$config.homeName
        })
      })
    }
  }
}
</script>

<style>
</style>
